<template>
    <div class="my-component">
        <ContentField v-if="!$store.state.user.pulling_info">
            <div class="container">
                <div class="row justify-content-md-center">
                    <div class="col-md-6 col-lg-4">
                        <form @submit.prevent="login" class="form-container">
                            <div class="mb-3">
                                <label for="username" class="form-label">用户名</label>
                                <input v-model="username" type="text" class="form-control" id="username"
                                    placeholder="请输入用户名/手机号">
                            </div>
                            <div class="mb-3">
                                <label for="password" class="form-label">密码</label>
                                <input v-model="password" type="password" class="form-control" id="password"
                                    placeholder="请输入密码">
                            </div>
                            <div class="error-message">{{ error_message }}</div>
                            <button type="submit" class="btn btn-primary">提交</button>
                        </form>
                    </div>
                </div>
            </div>
        </ContentField>
    </div>
</template>

<script>
import ContentField from '../../../components/ContentField.vue'
import { useStore } from 'vuex'
import { ref } from 'vue'
import router from '../../../router/index'

export default {
    components: {
        ContentField
    },
    setup() {
        const store = useStore();
        let username = ref('');
        let password = ref('');
        let error_message = ref('');

        // let show_content = ref(false);//优化

        const jwt_token = localStorage.getItem("jwt_token");//将token取出来
        if (jwt_token) {
            store.commit("updateToken", jwt_token);//如果存在就调用user.js中的updateTokenr中的函数，并且将jwt_token传进去
            store.dispatch("getinfo", {//验证用户信息是否合法，就是从云端获取用户信息，用getinfo函数
                success() {
                    router.push({ name: "home" });
                    store.commit("updatePullingInfo", false);
                },
                error() {
                    store.commit("updatePullingInfo", false);
                }
            })
        } else {
            store.commit("updatePullingInfo", false);
        }


        const login = () => {
            error_message.value = "";
            // 判断输入的内容是否是手机号
            const isPhoneNumber = /^\d{11}$/.test(username.value);
            const loginData = {
                // 根据是手机号还是用户名构造不同的请求参数
                [isPhoneNumber ? 'phone' : 'username']: username.value,
                password: password.value,
            };
            store.dispatch("login", {
                ...loginData,
                username: username.value,
                password: password.value,
                success() {
                    store.dispatch("getinfo", {
                        success() {
                            router.push({ name: 'home' });//如果加载成功的话，就跳转到home页面
                            // console.log(store.state.user);
                        }
                    })
                },
                error() {
                    error_message.value = "用户名或密码错误";
                }
            })
        }

        return {
            username,
            password,
            error_message,
            login,
            // show_content,
        }
    }
}
</script>

<style scoped>
.my-component {
  background-image: url('@/assets/images/image2.png');
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-container {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

button {
  width: 100%;
  margin-top: 10px;
}

div.error-message {
  color: red;
  margin-top: 10px;
}
</style>